<template>
  <div id="title" class="waterfall-wrapper">
    <div class="wrapper">
      <div class="wrap" style="overflow：hidden">
        <ul id="list">
          <li v-for="(item,index) in products" :key="item.pid">
            <a href="#" :class="{active:index==show}" @click="style(index)">{{item.name}}</a>
          </li>
        </ul>
      </div>
      <div>
        <Float v-if="show==0"></Float>
      </div>
      <Sofa v-if="show==1"></Sofa>
      <Bed v-if="show==2"></Bed>
      <Guijia v-if="show==3"></Guijia>
      <Yideng v-if="show==4"></Yideng>
      <Zhuoji v-if="show==5"></Zhuoji>
      <Dengju v-if="show==6"></Dengju>
      <Jiafang v-if="show==7"></Jiafang>
      <Canzhuo v-if="show==8"></Canzhuo>
      <Zhuangshi v-if="show==9"></Zhuangshi>
    </div>
  </div>
</template>

<script>
import Float from "./float";
import Sofa from "./discover_sofa";
import Bed from "./discover_bed";
import Guijia from "./discover_guijia";
import Yideng from "./discover_yideng";
import Zhuoji from "./discover_zhuoji";
import Dengju from "./discover_dengju";
import Jiafang from "./discover_jiafang";
import Canzhuo from "./discover_canzhuo";
import Zhuangshi from "./discover_zhuangshi";

export default {
  name: "discover_title",
  data() {
    return {
      //点击标题切换效果
      click: "",
      products: [
        { name: "全部" },
        { name: "沙发" },
        { name: "床·床具" },
        { name: "柜架" },
        { name: "椅凳" },
        { name: "桌几" },
        { name: "灯具" },
        { name: "家纺" },
        { name: "餐具" },
        { name: "装饰" }
      ],
      show: 0
    };
  },
  components: {
    Float,
    Sofa,
    Bed,
    Guijia,
    Yideng,
    Zhuoji,
    Dengju,
    Jiafang,
    Canzhuo,
    Zhuangshi
  },
  methods: {
    style(index) {
      this.show = index;
    }
  },
  mounted() {
    /* var scroll = new IScroll(".wrap", {
      scrollX: true,
      click: true,
      tap: true
    });
    // var myscroll=new IScroll('.waterfall-wrapper') */
    // scroll.refresh();
  }
};
</script>

<style  scoped>
* {
  touch-action: none;
}
#title {
  width: 100%;
  overflow: hidden;
}
#list {
  width: 172%;
  height: 147px;
  display: flex;
  align-items: center;
  margin-left: -25px;
}
#list li {
  background: #eeeeee;
  border-radius: 4px;
  margin-left: 35px;
}
#list li a {
  color: black;
  display: block;
  font-size: 21px;
  padding: 18px 23px;
}
.active {
  background: #568c5f;
  color: white;
}
</style>